import React, { Component } from 'react'
import NavHeader from '../../components/NavHeader'
import { Link } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import HouseItem from '../../components/HouseItem'
import './index.sass'

const BMap = window.BMap
// 覆盖物样式
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid rgb(255, 0, 0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgb(255, 255, 255)',
  textAlign: 'center'
}
export default class index extends Component {
  state = {
    housesList: [],
    isShowList: false
  }
  componentDidMount() {
    this.initMap()
  }
  async initMap() {
    //创建map对象
    const map = new BMap.Map('container')
    this.map = map
    //获取当前定位城市
    const { label, value } = JSON.parse(localStorage.getItem('fh_city'))
    //创建地址解析器实例
    let myGeo = new BMap.Geocoder();
    myGeo.getPoint(label, point => {
      if (point) {
        map.centerAndZoom(point, 11)
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.ScaleControl())
      }
    }, label)
    // 获取房源数据
    this.renderOverlays(value)
    // 给地图绑定移动事件
    map.addEventListener('movestart', () => {
      // console.log('movestart')
      if (this.state.isShowList) {
        this.setState({
          isShowList: false
        })
      }
    })
  }
  // 渲染覆盖物路口
  // 1接受区域id参数，获取该区域下的房源数据
  // 2 获取房源类型以及地图缩放级别
  async renderOverlays(id) {
    try {
      Toast.loading('加载中...', 0, null, false)
      let res = await this.$API.get(`/area/map?id=${id}`)
      // 调用方法获取级别和类型
      let { nextZoom, type } = this.getTypeAndZoom()
      res.forEach(i => {
        //创建覆盖物
        this.createOverlays(i, nextZoom, type)
      })
      Toast.hide()
    }catch(e){
      Toast.hide()
    }
    
  }
  // 计算要绘制的覆盖物类型和下一个缩放级别
  // 区   -> 11 ，范围：>=10 <12
  // 镇   -> 13 ，范围：>=12 <14
  // 小区 -> 15 ，范围：>=14 <16
  getTypeAndZoom() {
    //调用地图的getZooom()方法，来获取当前缩放级别
    let zoom = this.map.getZoom()
    let nextZoom, type
    if (zoom >= 10 && zoom < 12) {
      // 区
      // 下一个缩放级别
      nextZoom = 13
      //circle标识绘制圆形覆盖物(区，镇）
      type = 'circle'
    } else if (zoom >= 12 && zoom < 14) {
      nextZoom = 15
      type = 'circle'
    } else if (zoom >= 14 && zoom < 16) {
      type = 'rect'
    }
    return {
      nextZoom,
      type
    }
  }
  // 创建覆盖物
  createOverlays(data, zoom, type) {
    if (type === 'circle') {
      this.createCircle(data, zoom)
    } else {
      this.createRect(data)
    }
  }
  // 创建区，镇覆盖物
  createCircle(data, zoom) {
    const { coord: { longitude, latitude }, label: areaName, count, value } = data
    const areaPoint = new BMap.Point(longitude, latitude)
    const label = new BMap.Label('', {
      position: areaPoint,
      offset: new BMap.Size(-35, -35)
    })
    // 给lable对象添加唯一标识
    label.id = value
    //设置房源覆盖物的内容
    label.setContent(`
        <div class="bubble">
          <p class="name">${areaName}</p>
          <p>${count}</p>
        </div>
      `)
    label.setStyle(labelStyle)
    label.addEventListener('click', () => {
      //调用renderOverlays方法，获取该下的房源数据
      this.renderOverlays(value)
      // 放大地图，以当前点击的
      this.map.centerAndZoom(areaPoint, zoom)
      // 解决清除覆盖物时，百度地图API报错的问题
      setTimeout(() => {
        // 清除当前覆盖物信息
        this.map.clearOverlays()
      }, 0);
    })
    this.map.addOverlay(label)

  }
  // 创建小区覆盖物
  createRect(data) {
    const { coord: { longitude, latitude }, label: areaName, count, value } = data
    const areaPoint = new BMap.Point(longitude, latitude)
    const label = new BMap.Label('', {
      position: areaPoint,
      offset: new BMap.Size(-50, -28)
    })
    // 给lable对象添加唯一标识
    label.id = value
    //设置房源覆盖物的内容
    label.setContent(`
    <div class="rect">
      <span class="housename">${areaName}</span>
      <span class="housenum">${count}套</span>
      <i class="arrow"></i>
    </div>
    `)
    label.setStyle(labelStyle)
    label.addEventListener('click', (e) => {
      this.getHousesList(value)
      // 获取当前被点击项
      const target = e.changedTouches[0]
      this.map.panBy(
        window.innerWidth / 2 - target.clientX,
        (window.innerHeight - 330) / 2 - target.clientY
      )
    })
    this.map.addOverlay(label)
  }
  // 获取小区房源数据
  async getHousesList(id) {
    let res = await this.$API.get(`/houses?cityId=${id}`)
    this.setState({
      housesList: res.list,
      isShowList: true
    })
  }
  //封装渲染房屋列表的方法
  renderHousesList() {
    return this.state.housesList.map(item =>
      <HouseItem
        key={item.houseCode}
        src={'http://localhost:8080' + item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price}
      >
      </HouseItem>
    )
  }

  render() {
    return (
      <div className="map">
        <div style={{ marginTop: '-45px' }}>
          <NavHeader>地图找房</NavHeader>
        </div>
        {/* 地图容器 */}
        <div id="container"></div>
        <div
          className={[
            'houseList',
            this.state.isShowList ? 'show' : ''
          ].join(' ')}
        >
          <div className="titleWrap">
            <h1 className="listTitle">房屋列表</h1>
            <Link className="titleMore" to="/home/list">
              更多房源
            </Link>
          </div>

          <div className="houseItems">
            {/* 房屋结构 */}
            {this.renderHousesList()}
          </div>
        </div>
      </div>
    )
  }
}
